<template>
  <swiper
      :spaceBetween="30"
      :effect="'fade'"
      :pagination="{
      clickable: true
    }"
      :autoplay="{
          delay: 5000,
          disableOnInteraction: false,
        }"
      :modules="modules"
      class="section02A"
  >
    <swiper-slide v-for="(item, index) in props.data" :key="index">
      <div class="section02A-content">
        <img class="section02A-img" :src="item.img" />
        <div class="section02A-title">
          <h4>{{item.title}}</h4>
          <p>{{item.desc}}</p>
        </div>
      </div>

    </swiper-slide>
  </swiper>
</template>

<script setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";

import "swiper/css/effect-fade";
import "swiper/css/navigation";
import "swiper/css/pagination";


// import required modules
import { Autoplay, Pagination } from "swiper";

const props = defineProps(["data"])

const modules = [Autoplay, Pagination]
</script>

<style scoped>

</style>
